<template>
  <div class="counter-wrap d-flex align-items-center justify-content-center">
    <div class="app d-flex align-items-center justify-content-center">
      <div class="counter">
        <div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>

        <div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>

        <div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>

        <div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>

        <div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

//Colors
$black: #252a34;
$blue: #08d9d6;
$red: #ff2e63;
$white: #eaeaea;

body {
  background-color: $black;
}

.counter-wrap {
  height: 100%;
  width: 100%;
}

.counter {
  width: 3.3rem;
  height: 100%;
  margin-left: calc(50% - 1.6rem);
  padding-top: 13%;
  box-sizing: border-box;
}

.app {
  background-color: $black;
  height: 100%;
  width: 100%;
  min-width: 300px;
  min-height: 300px;
}

/* CUSTOMS */

.box {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  margin-right: 5px;
  background-color: $blue;
}

/* animation bindings */

// Row 1
.counter > div:nth-child(1) > .box:nth-child(1) {
  animation: box-1-1 10s infinite, rotate 1s linear infinite;
  transition: all 0s;
}

.counter > div:nth-child(1) > .box:nth-child(2) {
  animation: box-1-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(1) > .box:nth-child(3) {
  animation: box-1-3 10s infinite, rotate 1s linear infinite;
}

// Row 2
.counter > div:nth-child(2) > .box:nth-child(1) {
  animation: box-2-1 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(2) > .box:nth-child(2) {
  animation: box-2-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(2) > .box:nth-child(3) {
  animation: box-2-3 10s infinite, rotate 1s linear infinite;
}

// Row 3
.counter > div:nth-child(3) > .box:nth-child(1) {
  animation: box-3-1 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(3) > .box:nth-child(2) {
  animation: box-3-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(3) > .box:nth-child(3) {
  animation: box-3-3 10s infinite, rotate 1s linear infinite;
}

// Row 4
.counter > div:nth-child(4) > .box:nth-child(1) {
  animation: box-4-1 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(4) > .box:nth-child(2) {
  animation: box-4-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(4) > .box:nth-child(3) {
  animation: box-4-3 10s infinite, rotate 1s linear infinite;
}

// Row 5
.counter > div:nth-child(5) > .box:nth-child(1) {
  animation: box-5-1 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(5) > .box:nth-child(2) {
  animation: box-5-2 10s infinite, rotate 1s linear infinite;
}

.counter > div:nth-child(5) > .box:nth-child(3) {
  animation: box-5-3 10s infinite, rotate 1s linear infinite;
}

/* animations */

.rotate {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotateZ(-90deg);
  }
  
  50% {
    transform: rotateZ(0deg);
  }
}

@keyframes box-1-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-1-2 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-1-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-2-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $black;
  }
  
  30% {
    background-color: $black;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-2-2 {
  0% {
    background-color: $black;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $black;
  }
  
  30% {
    background-color: $black;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $black;
  }
  
  60% {
    background-color: $black;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $black;
  }
  
  90% {
    background-color: $black;
  }
  
  100% {
    background-color: $black;
  }
}

@keyframes box-2-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $black;
  }
  
  60% {
    background-color: $black;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-3-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-3-2 {
  0% {
    background-color: $black;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $black;
  }
}

@keyframes box-3-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-4-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $black;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $black;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $black;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-4-2 {
  0% {
    background-color: $black;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $black;
  }
  
  30% {
    background-color: $black;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $black;
  }
  
  60% {
    background-color: $black;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $black;
  }
  
  90% {
    background-color: $black;
  }
  
  100% {
    background-color: $black;
  }
}

@keyframes box-4-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $black;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-5-1 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-5-2 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $blue;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $black;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $black;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

@keyframes box-5-3 {
  0% {
    background-color: $blue;
  }
  
  10% {
    background-color: $black;
  }
  
  20% {
    background-color: $blue;
  }
  
  30% {
    background-color: $blue;
  }
  
  40% {
    background-color: $blue;
  }
  
  50% {
    background-color: $blue;
  }
  
  60% {
    background-color: $blue;
  }
  
  70% {
    background-color: $blue;
  }
  
  80% {
    background-color: $blue;
  }
  
  90% {
    background-color: $blue;
  }
  
  100% {
    background-color: $blue;
  }
}

</style>
